<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
shiro<c:set value="${pageContext.request.contextPath}" var="ctx"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录&注册</title>
    <link rel="stylesheet" href="${ctx}/css/login_style.css" type="text/css">

</head>
<body>
<!-- partial:index.partial.html -->
<h1>${requestScope.msg}</h1>
<div class="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>

        <div class="login-form">
            <form action="login" method="post">
                <div class="sign-in-htm" style="display: inline-block;">
                    <div class="group">
                        <label for="user" class="label">用户名</label>
                        <input id="username" name="username" type="text" class="input" placeholder="请输入:用户名\邮箱\手机号">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">密码</label>
                        <input id="password" type="password" name="password" class="input" data-type="password"
                               placeholder="请输入密码">
                    </div>
                    <div class="group">
                        <label for="pass" class="label" style="display:inline-block">验证码</label>
                        <input id="verifyCode1" name="verifyCode" type="text" class="input" placeholder="请输入验证码,不区分大小写">
                        <img src="verifyCode" style="margin-top: 20px">
                        <input id="btn" type="button" class="input" style="width: 200px;margin-top: 20px;"
                               value="看不清,换!">
                    </div>
                    <div class="group">
                        <input type="submit" class="button" value="登录">
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <a href="#forgot">忘记密码?</a>
                    </div>
                </div>
            </form>
            <div class="sign-up-htm" style="height: auto">
                <form action="register" method="post" onsubmit="return checkPassword();">
                    <div class="group">
                        <label for="user" class="label">用户名</label>
                        <input id="register_username" name="name" type="text" class="input">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">密码</label>
                        <input id="register_password" name="password" type="password" class="input"
                               data-type="password">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">重复密码</label>
                        <input id="register_confirm_password" name="confirm_password" type="password" class="input"
                               data-type="password">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">邮箱</label>
                        <input id="email" name="email" type="text" class="input">
                    </div>

                    <div class="group">
                        <label for="pass" class="label">手机号</label>
                        <input id="phone" name="phone" type="number" class="input">
                    </div>
                    <div class="group">
                        <label for="pass" class="label" style="display:inline-block">验证码</label>
                        <input id="verifyCode" name="verifyCode" type="text" class="input" placeholder="请输入验证码,不区分大小写">
                        <img id="verifyCode2" src="verifyCode" style="margin-top: 20px">
                        <input id="btn2" type="button" class="input" style="width: 200px;margin-top: 20px;"
                               value="看不清,换!">
                    </div>
                    <div class="group">
                        <input type="submit" class="button" value="注册">
                    </div>

                    <div class="foot-lnk">
                        <label for="tab-1">已经有账号?</label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- partial -->

</body>
<script type="text/javascript">
    document.getElementById("btn").onclick = function () {
        // 获取img元素
        // 为了让浏览器发送请求到servlet, 所以一定要改变src
        console.log("点击了更改验证码");
        document.getElementsByTagName("img")[0].src = "verifyCode?time=" + new Date().getTime();
    };
    document.getElementById("btn2").onclick = function () {
        // 获取img元素
        // 为了让浏览器发送请求到servlet, 所以一定要改变src
        console.log("点击了更改验证码2");
        document.getElementById("verifyCode2").src = "verifyCode?time=" + new Date().getTime();
    };

    function checkPassword() {
        /*var pwd=document.getElementsByTagName("input");
        for(var i=0;i<pwd.length;i++){
          if(pwd[i].type=='password'&&pwd[i].value==0){
            alert("请输入密码！");
            pwd[i].focus();
            return false;
          }
        }*/
        var newPassword = document.getElementById("register_password");
        var rePasswourd = document.getElementById("register_confirm_password");
        if (newPassword.value !== rePasswourd.value) {
            // document.getElementById("sure2").disable = disable;
            // document.getElementById("sure2").innerHTML="两次密码不相同";
            alert("输入密码不一致，请重新输入！");
            rePasswourd.value = "";
            rePasswourd.focus();
            return false;
        }
    }
</script>
</html>